<template>
    <div class="w750">
        <!-- 头部 -->
        <header>
            <div class="header-box">
                <div class="header-search">
                    <div class="ser-input" @click="goSearch">搜索您想要的商品</div>
                    <i class="ser-i"></i>
                </div>
            </div>
        </header>
        <!-- /头部 -->

        <div class="category" :class="themes.theme">
            <div class="category-tab" style="overflow-y: auto;">
                <div style="overflow: hidden;" ref="menuWrapper">
                    <ul class="c-tab-ul">
                        <li
                            @click="choseClassify(index, item.id)"
                            v-for="(item, index) in categoryArr.categoryList"
                            class="item"
                            :class="{ cur: currentIndex == index }"
                            :key="index"
                        >
                            <span class="item-a">{{ item.name }}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 无图模式 -->
            <div ref="conNoImages" class="category-con" style="overflow-y: auto;" v-if="categoryArr.schema == 'noImages'" @scroll="handleScroll">
				<!-- 一级 -->
				<div class="con-box" style="overflow: hidden" ref="foodsWrapper" v-if="categoryArr.grade == 'first'">
				    <div class="ser-list">
				        <div class="search-con" v-for="(item, index) in searchArr" :key="index" @click="goDetail(searchArr[index].prodId)">
				            <div class="pro-mes">
				                <div class="pro-img">
				                    <legend-image :pic="item.pic" :options="{ w: '160', h: '160', limit: 0 }" :isJD="item.prodSource == 'JD'" />
				                    <img src="@/assets/images/haitao-small.png" class="haitao" v-if="item.goodsType == 'overseas'" />
				                </div>
				                <div class="pro-name">
				                    <div class="name">{{ item.name }}</div>
				                    <div class="pro-price">
				                        <span class="price">
				                            ￥
				                            <em class="now">{{ Money(item.price)[0] }}</em>
				                            .{{ Money(item.price)[1] }}
				                        </span>
				                    </div>
				                </div>
				            </div>
				        </div>
				    </div>
				</div>
				<!-- 一级 end -->
                <!-- 二级 -->
                <div class="con-box no-picture" style="overflow: hidden" ref="foodsWrapper" v-if="categoryArr.grade == 'second'">
                    <div class="c-box">
                        <div class="c-content">
                            <div class="c-item" v-for="(item, index) in categoryArr.categoryList[currentIndex].childrenList" :key="index" @click="enterSearch(item.id, 'secondId')">
                                <span class="txt">{{ item.name }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 二级 end-->

                <!-- 三级 -->
                <div class="con-box no-picture" style="overflow: hidden" ref="foodsWrapper" v-if="categoryArr.grade == 'three'">
                    <div class="c-box" v-for="(item, index) in categoryArr.categoryList[currentIndex].childrenList" :key="index">
                        <div class="c-tit">{{ item.name }}</div>
                        <div class="c-content">
                            <span class="c-item" v-for="(item1, index1) in item.childrenList" :key="index1">
                                <span class="txt" @click="enterSearch(item1.id, 'threeId')">{{ item1.name }}</span>
                            </span>
                        </div>
                    </div>
                </div>
                <!-- 三级 end -->
            </div>
            <!-- 无图模式 end -->

            <!-- 有图模式 -->

            <div ref="conHasImages" class="category-con" style="overflow-y: auto;" v-if="categoryArr.schema == 'hasImages'">
                <!-- 二级 -->
                <div class="con-box" style="overflow: hidden" ref="foodsWrapper" v-if="categoryArr.grade == 'second'">
                    <div class="second-item">
                        <div class="second-list">
                            <div class="item" v-for="(item, index) in categoryArr.categoryList[currentIndex].childrenList" :key="index" @click="enterSearch(item.id, 'secondId')">
                                <span class="item-img"><legend-image :pic="item.icon" :options="{ w: '160', h: '160', limit: 0 }" /></span>
                                <span class="item-txt">{{ item.name }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 二级 end -->

                <!-- 三级 -->
                <div class="con-box" style="overflow: hidden" ref="foodsWrapper" v-if="categoryArr.grade == 'three'">
                    <div class="second-item third-item" v-for="(item, index) in categoryArr.categoryList[currentIndex].childrenList" :key="index">
                        <div class="second-tit">
                            <span class="second-category">{{ item.name }}</span>
                        </div>
                        <div class="second-list">
                            <div class="item" v-for="(item1, index) in item.childrenList" :key="index" @click="enterSearch(item1.id, 'threeId')">
                                <span class="item-img"><legend-image :pic="item1.icon" :options="{ w: '160', h: '160', limit: 0 }" /></span>
                                <span class="item-txt">{{ item1.name }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 三级 end -->
            </div>
            <!-- 有图模式 -->
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import cash from 'utils/tool';
import { category, searchList } from 'api/category';
import legendImage from 'components/legendImage/legendImage.vue';
export default {
	name: 'category',
    data() {
        return {
            Money: cash,
            categoryListId: '', //分类id
            categoryArr: '', //分类
            searchArr: [], //一级分类列表
            currentIndex: 0,
            pageHeight: 0,
            total: null,
            source: 'category',
            params: {
				curPageNO: 1,
                firstCategoryId: ''
            },
            index: 0,
            loading: false,
			noImagesScrollTop: 0,
			hasImagesScrollTop: 0,
        };
    },
    created() {
        this.getCategory();
        this.pageHeight = window.screen.height - 98;
    },
	mounted() {
	    let that = this;
	},
	activated() {
		// 如果容器滚动条偏移量有值则赋值
		if(this.noImagesScrollTop && this.$refs.conNoImages) {
			this.$refs.conNoImages.scrollTop = this.noImagesScrollTop
		}
		if(this.hasImagesScrollTop && this.$refs.conHasImages) {
			this.$refs.conHasImages.scrollTop = this.hasImagesScrollTop
		}
	},
    methods: {
        async getCategory() {
            try {
                let res = await category();
                if (res.status != 1) {
                    this.$toast(res.msg);
                    return;
                }
                this.categoryArr = res.result;
                this.categoryListId = res.result.categoryList[0].id;
                if (this.categoryArr.grade == 'first') {
                    this.params.firstCategoryId = this.categoryListId;
                    this.getSearchlist(this.params, false);
                }
            } catch (error) {
            }
        },

        async getSearchlist(params, isAppend = true) {
            let that = this;
            this.locked();
            try {
                let res = await searchList(params);
                if (res.result.resultList) {
                    that.total = res.result.total;
                    if (!isAppend) {
                        that.searchArr = res.result.resultList;
                    } else {
						that.searchArr.push(...res.result.resultList)
                    }
                    that.unLocked();
                }
            } catch (error) {
            } finally {
                that.unLocked();
            }
        },

        goback() {
            this.$router.back();
            this.$router.isBack = true;
        },

        choseClassify(index, categoryListId) {
            if (this.currentIndex === index) {
                return;
            }
            this.currentIndex = index;
            this.index = index;
            this.initialize(); //重置
            if (this.categoryArr.grade == 'first') {
                this.params.firstCategoryId = categoryListId;
                this.getSearchlist(this.params, false);
            }
        },
        initialize() {
            this.searchArr = [];
            this.params.curPageNO = 1;
            this.loading = false;
            this.total = null;
        },
        //滚动监听
        handleScroll(e) {
			this.$refs.conNoImages && this.$refs.conNoImages.scrollTop && (this.noImagesScrollTop = this.$refs.conNoImages.scrollTop)
			this.$refs.conHasImages && this.$refs.conHasImages.scrollTop && (this.hasImagesScrollTop = this.$refs.conHasImages.scrollTop)
			// 监听容器滚动条偏移量,如果是0就不赋值
			this.$utils.uDebounce(() => {
				if (this.hasMore()) {
				    this.params.curPageNO += 1;
				    this.getSearchlist(this.params);
				}
			})
            
        },
        // 判断有没有更多
        hasMore() {
            let that = this;
            if (this.searchArr.length >= this.total) {
                return false;
            } else {
                return true;
            }
        },
        isLocked() {
            //判断是否下一页是否加载完
            return this.loading ? true : false;
        },
        locked() {
            this.loading = true;
        },
        unLocked() {
            this.loading = false;
        },
        //跳搜索页
        goSearch() {
            this.$router.push('/search');
        },
        //去商品详情
        goDetail(prodId) {
            let goodsInfoId = prodId;
            this.$router.push({
                path: `/goodsDetail`,
                query: {
                    goodsInfoId: goodsInfoId
                }
            });
        },
        //搜索列表
        enterSearch(id, type) {
            if (type == 'threeId') {
                let threeId = id ? id : '';
                this.$router.push({
                    path: `/searchList`,
                    query: {
                        categoryId: threeId,
                        source: 'category',
                        grade: 3
                    }
                });
            } else {
                let secondId = id ? id : '';
                this.$router.push({
                    path: `/searchList`,
                    query: {
                        categoryId: secondId,
                        source: 'category',
                        grade: 2
                    }
                });
            }
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    components: {
        legendImage
    }
};
</script>

<style src="../../assets/css/search.css" scoped></style>
<style src="../../assets/css/category.css" scoped></style>
<style src="../../assets/css/style/category-style.css" scoped></style>
<style lang="stylus" scoped>
.pro-img  .haitao {
  position: absolute;
  top: 0;
  left: 0px;
  width: 30px !important;
  height: 30px !important;
}
header .header-box .header-search .ser-input {
  color: #ccc;
}
</style>
